<template>
  <div class="cadre-view-coursewrae" :class="{'p-full':isFull}">
    <template v-if="type == 'KCLX01' || type == 'KCLX03' ">
      <video v-if="showType==='before'" class="video" :class="{'p-full':isFull}" controls :src="view+fileId" />
      <div v-if="showType==='after'" :class="{'video-full':isFull,'video':!isFull}">
        <video
            id="my-video"
            style="width: 100%;height: 100%;"
            class="video-js vjs-default-skin"
            controls
            preload="auto"
        >
          <source :src="fileId" type="application/x-mpegURL">
        </video>
      </div>

    </template>
    <!--    <template  v-if="type == 'KCLX03'">-->
    <!--      <audio v-if="showType==='before'" :src="view+fileId" controls="controls" class="audio" />-->
    <!--      <audio v-if="showType==='after'" ref="my-audio"  controls="controls" class="audio" />-->
    <!--    </template>-->
    <template v-if="type == 'KCLX02'">
      <div class="pdf" :class="{'p-full':isFull}">
        <pdf v-for="item in numPages" :key="item" :src="fileId" :page="item" />
      </div>
    </template>
  </div>
</template>
<script>
import videojs from 'video.js'
import Hls from 'hls.js'
import 'videojs-contrib-hls'
import pdf from 'vue-pdf'
export default {
  name: 'CadreViewCourseWare',
  components: { pdf },
  props: {
    type: {
      type: String,
      default: 'KCLX01'
    },
    fileId: {
      type: String,
      default: ''
    },
    showType: {
      type: String,
      default: 'before' // before 转码前,after 转码后
    },
    isFull: {
      type: Boolean,
      default: false // 是否全屏，默认false
    }
  },
  data() {
    return {
      numPages: '',
      view: '/API-DOCUMENT/document/file/download?id=',
      src: '',
      player: null
    }
  },
  watch: {
  },
  mounted() {
    setTimeout(() => {
      if ((this.type === 'KCLX01' || this.type === 'KCLX03') && this.showType != 'before') {
        this.getVideo()
      }
      // else if(this.type==='KCLX03' && this.showType!='before'){
      //   this.setAudio();
      // }
    })
  },
  destroyed() {
    if (this.player !== null) {
      this.player.dispose()
    }
  },
  created() {
    if (this.type === 'KCLX02') {
      const url = this.showType === 'before' ? this.view + this.fileId : this.fileId
      this.src = pdf.createLoadingTask(url)
      this.loadPdfHandler()
    }
  },
  methods: {
    setAudio() {
      if (Hls.isSupported()) {
        var hls = new Hls()// 实例化 Hls 对象
        hls.loadSource(this.fileId)// 传入路径
        hls.attachMedia(this.$refs['my-audio'])
        hls.on(Hls.Events.MANIFEST_PARSED, () => { // 加载成功
          setTimeout(() => {
            this.$refs['my-audio'].play()// 调用播放 API
          }, 0)
        })
      }
    },
    getVideo() {
      this.player = videojs(
          'my-video',
          {
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true
          },
          function() {
            this.play()
          }
      )
    },
    loadPdfHandler() {
      const loading = this.$loading({
        lock: true,
        text: '加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.src.promise.then(pdf => {
        loading.close()
        this.numPages = pdf.numPages
      })
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
$mainColor: #18a5fd;
.cadre-view-coursewrae {
  height: 400px;
  &.p-full{
    height: 100%;
  }
  .video-full{
    height: 88vh;
  }
  .video {
    width: 100%;
    height: 400px;
    &.p-full{
      height: 88vh;
    }
    background-color: black;
  }
  .audio {
    width: 100%;
    margin-top: 100px;
    outline: none;
  }
  .pdf {
    width: 100%;
    height: 400px;
    &.p-full{
      height: calc(100vh - 130px);
      overflow-y: auto;
    }
    overflow-y: auto;
  }
}
</style>

